<!-- 模板继承 -->
{extend name="public:base" /}

<!-- 页面标题 -->
{block name="title"}Administrator{/block}

<!-- 自定义css -->
{block name="css"}{/block}

<!-- 内容区域 -->
{block name="content"}
<div class="box box-primary">
    <div class="box-body">
        <form action="#" method="get" class="form-inline">
          <div class="form-group">
            <label>{:lang('Navigation')}：</label>
            <select name="cid" class="form-control">
              {volist name="category" id="vo"}
              <option value="{$vo.id}" {eq name='search.cid' value='$vo.id'}selected{/eq}>{$vo.name}</option>
              {/volist}
            </select>
          </div>

          <button type="submit" class="btn btn-default">{:lang('Select')}</button>
          {:lang('Or')} <a href="{:url('admin/navigation/category')}" style="color:#0073aa">{:lang('Category')}</a>
        </form>
    </div>
</div>

<div class="row">
  <div class="col-md-4">
        <div class="box box-solid">
            <div class="box-header with-border">
                <h4 class="box-title">
                  {:lang('Category')}
                </h4>
            </div>
            <div class="box-body no-padding">
                <table class="table table-condensed" id="category">
                  <tbody>
                    <tr>
                      <td>{:lang('Check all')}</td>
                      <td width="5%"><input id="checkAll" type="checkbox"></td>
                    </tr>
                    {volist name="doc_cate" id="vo"}
                    <tr data-tt-id="{$vo.id}" data-tt-parent-id="{$vo.pid}">
                      <td>{$vo.name}</td>
                      <td width="5%"><input name="ids[]" value="{$vo.id}" type="checkbox"></td>
                    </tr>
                    {/volist}
                  </tbody>
                </table>
            </div>
            <div class="box-footer">
                <div class="btn-group pull-right">
                    <button class="btn btn-sm btn-default btn-flat" onclick="addCateToNav();" type="button">{:lang('Add')}</button>
                </div>
            </div>
          </div>
        <div class="box box-solid">
            <div class="box-header with-border">
                <h4 class="box-title">
                  {:lang('Custom')}
                </h4>
            </div>
            <div class="box-body">
                <form role="form" id="operate">
                    <div class="form-group">
                      <label>{:lang('Url')}</label>
                      <div class="row">
                      <div class="col-md-12">
                      <input type="text" name="url" class="form-control input-sm" placeholder="">
                      </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label>{:lang('Title')}</label>
                      <div class="row">
                      <div class="col-md-12">
                      <input type="text" name="name" class="form-control input-sm" placeholder="">
                      </div>
                      </div>
                    </div>
                </form>
            </div>
            <div class="box-footer">
                <div class="btn-group pull-right">
                    <button class="btn btn-sm btn-default btn-flat" onclick="addCustomNav();" type="button">{:lang('Add')}</button>
                </div>
            </div>
        </div>
  </div>
  <div class="col-md-8">
    <div class="box box-solid">
        <div class="box-header with-border">
            <h3 class="box-title">{$cate_name|default="请先创建一个菜单"}</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            {notempty name="cate_name"}
            <div class="dd" data-plugin="nestable">
              <ol class="dd-list">
                {volist name="list" id="vo"}
                <li class="dd-item dd-item-alt" data-id="{$vo.id}">
                  <div class="dd-handle"></div>
                  <div class="dd-content">{$vo.name}<span class="pull-right" onclick="remove({$vo.id});"><i class="fa fa-fw fa-remove"></i></span></div>
                  {notempty name="vo.child"}
                  <ol class="dd-list">
                    {volist name="vo.child" id="child"}
                    <li class="dd-item dd-item-alt" data-id="{$child.id}">
                      <div class="dd-handle"></div>
                      <div class="dd-content">{$child.name}<span class="pull-right" onclick="remove({$child.id});"><i class="fa fa-fw fa-remove"></i></span></div>
                      {notempty name="child.child"}
                      <ol class="dd-list">
                        {volist name="child.child" id="gchild"}
                        <li class="dd-item dd-item-alt" data-id="{$gchild.id}">
                          <div class="dd-handle"></div>
                          <div class="dd-content">{$gchild.name}<span class="pull-right" onclick="remove({$gchild.id});"><i class="fa fa-fw fa-remove"></i></span></div>
                        </li>
                        {/volist}
                      </ol>
                      {/notempty}
                    </li>
                    {/volist}
                  </ol>
                  {/notempty}
                </li>
                {/volist}
              </ol>
            </div>
            {else /}
            <a href="{:url('admin/navigation/category')}" style="color:#0073aa">菜单管理</a>
            {/notempty}
            
        </div>
        <!-- /.box-body -->
    </div>
  </div>
</div>

{/block}

<!-- 自定义js -->
{block name="js"}
<script type="text/javascript">
    $(document).ready(function(){
        $("#category").treetable({ expandable: true });
        $("#category").treetable('expandAll');
    });

    $('.dd').nestable({ 
        maxDepth:3,
    });
    $('.dd').on('change', function() {
        var data = $('.dd').nestable('serialize');
        $.ajax({
            url:"{:Url('admin/navigation/sortNav')}",
            data:{'ids':data},
            type:'post',
            dataType:'json',
            success: function(xhr){
                if(xhr.code == 200){
                    swal(xhr.msg, "","success").then(function(value){
                        window.location.reload();
                    });
                }else{
                    swal(xhr.msg, "", "error");
                }
            }
        })
    });

    //批量添加菜单操作
    function addCateToNav(){
        var chk_ids = [];
        var chk_cid = "{$cate_cid}";
        $('input[name="ids[]"]:checked').each(function(){ 
            chk_ids.push($(this).val()); 
        });

        if(chk_ids.length < 1){
            swal({
                title: "{:lang('No record selected')}",
                text: "",
                type: "warning"
            });
            return false;
        }
        if (chk_cid == '') {
            swal({
                title: "未选择任何菜单!",
                text: "",
                type: "warning"
            });
            return false;
        }
        swal({
          title: "{:lang('Are you sure')}",
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: "{:lang('Yes')}",
          cancelButtonText: "{:lang('No')}",
        }).then(function(result) { 
            if (result.value) {
                $.ajax({
                    url:"{:Url('admin/navigation/addNav')}",
                    data:{'ids':chk_ids,'cid':chk_cid},
                    type:'post',
                    dataType:'json',
                    success: function(xhr){
                        if(xhr.code == 200){
                            swal(xhr.msg, "","success").then(function(value){
                                window.location.reload();
                            });
                        }else{
                            swal(xhr.msg, "", "error");
                        }
                    }
                })
            }
       })
    }
    
    function addCustomNav()
    {
        var chk_cid = "{$cate_cid}";
        var chk_url = $("[name='url']").val();
        var chk_name = $("[name='name']").val();
        if (chk_cid == '') {
            swal({
                title: "未选择任何菜单!",
                text: "",
                type: "warning"
            });
            return false;
        }
        swal({
          title: "{:lang('Are you sure')}",
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: "{:lang('Yes')}",
          cancelButtonText: "{:lang('No')}",
        }).then(function(result) { 
            if (result.value) {
                $.ajax({
                    url:"{:Url('admin/navigation/addNav')}",
                    data:{'cid':chk_cid,'url':chk_url,'name':chk_name},
                    type:'post',
                    dataType:'json',
                    success: function(xhr){
                        if(xhr.code == 200){
                            swal(xhr.msg, "","success").then(function(value){
                                window.location.reload();
                            });
                        }else{
                            swal(xhr.msg, "", "error");
                        }
                    }
                })
            }
       })
    }

    function remove(id){
        swal({
          title: "{:lang('Are you sure')}",
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: "{:lang('Yes')}",
          cancelButtonText: "{:lang('No')}",
        }).then(function(result){
              if (result.value) {
                $.ajax({
                    url:"{:Url('admin/navigation/remove')}",
                    data:{'id':id},
                    type:'post',
                    dataType:'json',
                    success: function(xhr){
                        if(xhr.code == 200){
                            swal(xhr.msg, "","success").then(function(value){
                                window.location.reload();
                            });
                        }else{
                            swal(xhr.msg, "", "error");
                        }
                    }
                })
              }
        })
    }
</script>
{/block}